<template>
	<view class="list-right" :style="{'z-index': isShow ? 300:10}">
		<view class="author-img">
			<view @click.stop="toCreaterPage" style="padding-left: 10upx;">
				<image class="img" :src="video.shop_logo"></image>
				<view class="follow cuIcon-add">
					<image @click.stop="addfollow" v-if="video.is_follow==0" src="../../static/images/flow_before.png"
						mode=""></image>
					<image @click.stop="cancelFollow" v-else src="../../static/images/flow_after.png" mode=""></image>
					{{video.follow_num}}
				</view>
			</view>
		</view>
		<!-- 		<view class="right-box">
			<view class="icon cuIcon-likefill" :class="{fav: isFav}" @click="handleFollow"></view>
			<image @click.stop="handleFollow" v-if="video.is_like == 0" class='icon' src="../../static/images/like_before.png" mode=""></image>
			<image @click.stop="handleFollow" v-else class='icon' src="../../static/images/like_after.png"></image>
			<view class="count">{{video.praise_num}}</view>
		</view> -->
		<view class="right-box ss" style="margin-top: 150upx;">
			<!-- <view class="icon cuIcon-commentfill" @click="handleComment"></view> -->
			<image class='icon' src="../../static/images/common.png" mode="" style="padding-left: 14upx;"
				@click="changeTitle"></image>
			<text class="count" style="margin-left: 10upx;">{{video.commentNum}}</text>
		</view>
		<view class="right-box" @click.stop="handleForward" style="padding-left: 14upx;">
			<image class='icon' src="../../static/images/plyaer_share.png" mode=""></image>
			<view class="count">分享</view>
			<button class="share_btn" open-type="share"></button>
		</view>

		<view v-if="video.is_coupon ==1" class="music-img" @click="close" :class="{'pauseAnimate': isLike}">
			<image class="img" src="../../static/images/coupon_player.png" />
		</view>

		<coupon :couponList="list" :isShow="isShow" @getcoupon='setCoupon' @close='close'></coupon>
		<!-- <button @click="open">打开弹窗</button> -->
		<uni-popup ref="popup" type="dialog">
			<uni-popup-dialog mode="base" :duration="2000" :before-close="true" @close="close" @confirm="confirm"
				content="是否前往登录页面"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	import coupon from '../coupon.vue'
	export default {
		data() {
			return {
				baseUrl: getApp().globalData.baseUrl,
				fileUrl: getApp().globalData.fileUrl,
				isFollow: false,
				isFav: false,
				isPauseAnimate: true,
				isForward: false,
				isLike: false,
				// video: '',
				avatar: '',
				userLogo: '',
				clickLoading: false,
				isShow: false,
				list: []
			}
		},
		mounted() {
			// console.log(this.video, "右边组件")
			this.videoInfo = this.video
			this.avatar = this.fileUrl + this.video.avatar
			this.userLogo = this.video.shop_logo
			this.userInfo = this.$store.getters.getuserInfo
			return
			this.getFav()

		},
		props: ['index', 'video', 'onOk'],
		components: {
			coupon
		},
		// watch:{
		// 	videoInfo(videoInfo){
		// 		console.log(videoInfo)
		// 		this.goodsList = videoInfo.goodsList
		// 	}
		// },
		methods: {
			confirm() {
				console.log("确定")
				uni.navigateTo({
					url: '/pagesB/login/login'
				})
			},
			changeTitle() {
				// 自定义事件 titleChanged，该事件会传一个参数 "新的标题"
				this.$http.getreadprofile({shop_id:''}).then(res=>{
								if(res.status == 200) {
									this.$emit("titleChanged", "true")
									this.onOk()
								}else{
									this.open()
								}
							})
				
			
			},
			close() {

				if (this.list.length == 0) {
					// uni.showLoading({
					// 	title:'请求中...'
					// })
					this.getCouponList()
				} else {
					this.isShow = !this.isShow
				}

			},
			// 获取点赞信息
			getFav() {
				uni.request({
					url: this.baseUrl + '/user/queryUserLike?userId=' + this.video.id + '&videoId=' + this.video
						.id,
					method: 'POST',
					header: {
						'content-type': 'application/json',
						'userId': this.userInfo.id,
						'userToken': this.userInfo.userToken
					},
					success: (res) => {
						if (res.data.status === 200) {
							this.isFav = res.data.data
						}
					}
				})
			},
			// 打开评论界面
			handleComment() {
				// uni.navigateTo({
				// 	url: '../../pagesC/comment/comment?videoId=' + this.video.id + '&createrId=' + this.video.userId + '&videoDesc=' + this.video.videoDesc
				// })
			},
			// 打开分享与举报
			handleForward() {
				console.log("分享", `${this.userInfo.title}`, this.videoInfo)
				uni.share({
					type: 0,
					title: `${this.videoInfo.shop_name}`,
					summary: `${this.videoInfo.shop_name}`,
					provider: 'weixin',
					scene: 'WXSceneSession',
					href: `${this.videoInfo.video_url}`, //分享的标准格式为 "https://xxx.xxx.com/h5/#/...'
					imageUrl: this.videoInfo.cover_img,
					success: () => {
						this.http('api/Alive/shareOk').then(res => {
							if (res.status === 200) {
								uni.showToast({
									title: "分享成功",
									duration: 2000,
									icon: 'none'
								});
							}
						})
					},
					fail: err => {
						uni.showToast({
							title: "分享失败",
							duration: 2000,
							icon: 'none'
						});
					}
				});
			},
			// 跳转到作者个人界面
			toCreaterPage() {
				console.log(this.video, "店铺Id")
				uni.navigateTo({
					url: `/pagesC/home/personage/personage?userId=${this.video.shop_id}&circle_id=${this.video.circle_id}`
				})
			},
			// 点赞与取消点赞
			handleFollow() {
				console.log(this.userInfo, "取关跟关注")
				if (this.clickLoading) {
					uni.showToast({
						title: "点击过于频繁 ~",
						icon: "none",
						duration: 1000
					})
					return
				}
				if (this.userInfo === null || this.userInfo === undefined || this.userInfo === '') {
					uni.showToast({
						title: "登录后才可以点赞噢 \r\n ∠( ᐛ 」∠)＿",
						icon: "none",
						duration: 2000
					})
					return
				}
				this.clickLoading = true
				let islike = this.video.is_like
				this.$http.videolike({
					videoid: this.video.id,
					islike
				}).then(res => {
					if (res.status == 200) {
						// this.video.is_like = islike == 0 ? 1: 0
						this.$emit('addLike', {
							islike: islike == 0 ? 1 : 0,
							praise_num: res.data
						})
					} else if (res.status == 400) {
						uni.showToast({
							title: "请先登录",
							icon: "none",
							duration: 1000
						})
					}
					this.clickLoading = false
				}).catch(err => {
					uni.showToast({
						title: "服务器异常",
						icon: "none",
						duration: 2000
					})
					this.clickLoading = true
					return
				})
			},
			// 旋转动画暂停
			pauseAnimate() {
				this.isPauseAnimate = true
			},
			// 旋转动画开启
			playAnimate() {
				this.isPauseAnimate = false
			},
			getCouponList() {
				this.$http.getShopcoup({
					shop_id: this.video.shop_id,
					uid: this.userInfo.id
				}).then(res => {
					uni.hideLoading()
					if (res.status == 200) {
						this.list = res.data
						this.isShow = !this.isShow
					} else if (res.status == 200) {
						// wx.showToast({
						// 	title: '请先登录',
						// 	mask: true,
						// 	icon: 'none',
						// 	duration: 1500
						// })
						this.open()
					} else {
						wx.showToast({
							title: res.mess,
							mask: true,
							icon: 'none',
							duration: 1500
						})
					}

				}).catch(err => {
					wx.showToast({
						title: '服务器错误',
						mask: true,
						icon: 'none',
						duration: 1500
					})
				})
			},
			setCoupon(index) {
				this.list[index].have = 1
			},
			open() {
				// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
				this.$refs.popup.open('center')
			},
			close() {
				// TODO 做一些其他的事情，before-close 为true的情况下，手动执行 close 才会关闭对话框
				// ...
				this.$refs.popup.close()
			},
			addfollow() {
				
				
				if (this.clickLoading) {
					uni.showToast({
						title: "点击过于频繁 ~",
						icon: "none",
						duration: 1000
					})
					return
				}
				this.video.is_follow=1
				if (this.userInfo === null || this.userInfo === undefined || this.userInfo === '') {
					this.open()
				}else{
					this.clickLoading = true
					let shop_id = this.video.shop_id
					this.$http.addfollow({
						shop_id
					}).then(res => {
						console.log(res)
						if (res.status == 200) {
							
							
							this.video.follow_num++
							this.$emit('setFollow','true')
							console.log('取消',this.video.is_follow)
						}else if(res.mess == "请先登录"){
							this.open()
						}
						this.clickLoading = false
					}).catch(err => {
						this.clickLoading = false
					})
				}
				// this.video.is_follow=1
				// // console.log(this.video, "vider")
				// 	// if (this.clickLoading) {
				// 	// 	uni.showToast({
				// 	// 		title: "点击过于频繁 ~",
				// 	// 		icon: "none",
				// 	// 		duration: 1000
				// 	// 	})
				// 	// 	return
				// 	// }
				// 	if (this.userInfo === null || this.userInfo === undefined || this.userInfo === '') {
				// 		this.open()
				// 	}else{
				// 		this.clickLoading = true
				// 		let shop_id = this.video.shop_id
				// 		this.$http.addfollow({
				// 			shop_id
				// 		}).then(res => {
				// 			console.log(res)
				// 			if (res.status == 200) {
				// 				this.video.follow_num++
				// 				this.$emit('setFollow', this.video.shop_id)
				// 				console.log('关注',this.video.is_follow)
				// 			} else {
				// 				/*  关注接口的提醒 */
				// 				// this.open()
				// 				uni.showToast({
				// 					title:res.mess,
				// 					icon:'none'
				// 				})
				// 			}
				// 			this.clickLoading = false
				// 		}).catch(err => {
				// 			this.clickLoading = false
				// 		})
				// 	}
					
				},
				cancelFollow() {
				
					
					if (this.clickLoading) {
						uni.showToast({
							title: "点击过于频繁 ~",
							icon: "none",
							duration: 1000
						})
						return
					}
						this.video.is_follow=0
					if (this.userInfo === null || this.userInfo === undefined || this.userInfo === '') {
						this.open()
					}else{
						this.clickLoading = true
						let shop_id = this.video.shop_id
						this.$http.cancelfollow({
							shop_id
						}).then(res => {
							console.log(res)
							if (res.status == 200) {
								
								
								this.video.follow_num--
								this.$emit('setFollow','true')
								console.log('取消',this.video.is_follow)
							}else if(res.mess == "请先登录"){
							this.open()
						}
							this.clickLoading = false
						}).catch(err => {
							this.clickLoading = false
						})
					}
					
			},
		}
	}
</script>

<style lang="scss" scoped>
	// .pinglun{
	// 	width: 100%;
	// }
	.share_btn {
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		opacity: 0;
	}

	.list-right {
		width: 120rpx;
		margin-right: 10rpx;
		display: flex;
		flex-direction: column;
		// align-items: flex-end;
		justify-content: flex-end;

		.author-img {
			position: relative;
			width: 120rpx;
			text-align: center;
			// margin-left: 32rpx;
			margin-bottom: 20rpx;

			.img {
				width: 90upx;
				height: 90upx;
				border-radius: 50%;
				border: 2px solid #FFFFFF;
			}

			.follow {
				color: white;
				position: absolute;
				width: 66rpx;
				height: 47rpx;
				// background-color: #ff3d3d;
				border-radius: 20rpx;
				line-height: 47rpx;
				background: red;
				// border-radius: 50%;
				text-align: center;
				left: 36rpx;
				font-size: 34upx;
				bottom: -88rpx;

				// font-weight: bold;
				image {
					width: 100%;
					height: 100%;
				}
			}
		}

		.right-box {
			margin: 30rpx 0;
			color: white;
			text-align: center;
			font-size: 30rpx;
			display: flex;
			flex-direction: column;
			position: relative;
			// justify-content: center;
			align-items: center;

			.fav {
				color: #F43F3B;
			}

			.count {
				text-align: center;
				margin-top: 15rpx;
				font-size: 34upx;
			}

			.icon {
				width: 53rpx;
				height: 50rpx;
				font-size: 70rpx;
				transition: color .5s;
			}
		}

		.music-img {
			width: 120rpx;
			height: 120rpx;
			text-align: center;
			margin-top: 40rpx;

			// margin-left: 24rpx;
			.img {
				width: 120rpx;
				height: 87rpx;
				// border-radius: 50%;
				// background: #F1F1F1;
				// opacity: .8;
				// border: 2px solid #F1F1F1;
			}
		}

		.pauseAnimate {
			animation-play-state: paused;
		}
	}

	@keyframes around {
		0% {
			transform: rotate(0deg);
		}

		100% {
			transform: rotate(360deg);
		}
	}
</style>
